import { ColorPicker } from "antd";
import FirstTitle from "@/components/FirstTitle";
import SubTitle from "@/components/subTitle";
import EffectContainer from "@/components/effectContainer";

import "./index.scss";
import { CSSProperties, useEffect, useState } from "react";
import { getCode } from "@/api/codeApi.ts";
import Code from "@/components/code";

export const ContrastColor = () => {
  const [color, setColor] = useState("#fff");
  const handlerChange = (_, hex: string) => {
    setColor(hex);
  };
  const [code, setCode] = useState("");
  const [cssCode, setCssCode] = useState("");
  useEffect(() => {
    getCode("/contrastColor/代码.txt").then(({ data }) => {
      setCode(data);
    });
    getCode("/contrastColor/css.txt").then(({ data }) => {
      setCssCode(data);
    });
  }, []);
  return (
    <>
      <FirstTitle title="对比度颜色"></FirstTitle>
      <SubTitle title="效果"></SubTitle>
      <EffectContainer
        effect={
          <div className="text-box">
            <ColorPicker
              defaultValue={color}
              showText
              placement="topRight"
              onChange={handlerChange}
            />
            <div
              className="show-text"
              style={
                {
                  background: color,
                  "--bg": color,
                } as CSSProperties
              }
            >
              CSS
            </div>
          </div>
        }
        code={<Code content={code}></Code>}
        css={<Code type="css" content={cssCode}></Code>}
      ></EffectContainer>
    </>
  );
};
